// 自调用函数避免变量命名冲突
(function (window,undefined) {

    var position = 'absolute';
    // 用于存放食物dom对象的数组
    var elements = [];
    /*
        parent:地图对象
        options:食物对象的属性
    */
    function Food(map, options) {
        options = options || {}
        this.width = options.width || 20;
        this.height = options.height || 20;
        this.backgroundColor = this.backgroundColor || 'green';
        this.position = position;
        this.x = options.x || 0;
        this.y = options.y || 0;
    }

    // 初始化食物
    Food.prototype.render = function (map) {
        // 先删除之前的食物
        remove();
        //创建div
        div = document.createElement('div');
        // 将食物div挂载到页面上
        map.appendChild(div);

        // 将食物的dom对象存入数组
        elements.push(div);

        // 随机生成x坐标
        this.x = Tools.getRandom(0, map.offsetWidth / this.width - 1) * this.width;
        // 随机生成y坐标
        this.y = Tools.getRandom(0, map.offsetHeight / this.height - 1) * this.height;
        //设置样式
        div.style.left = this.x + 'px';
        div.style.top = this.y + 'px';
        div.style.width = this.width + 'px';
        div.style.height = this.height + 'px';
        div.style.backgroundColor = this.backgroundColor;
        div.style.position = this.position;

    }

    // 移除食物:因为此方法只在食物对象中使用,故声明称函数,可以保护其不会被外部作用域访问到
    function remove() {
        // 1-删除数组;删除数组的时候一定要从后往前删,否则数组元素删除不完
        for (var i = elements.length - 1; i >= 0; i--) {
            // 注意:顺序不能颠倒
            // 1-删除页面上的食物:先找到父元素,然后父元素调用removeChild()删除子元素
            elements[i].parentNode.removeChild(elements[i]);
            // 2-从数组中删除
            elements.splice(i, 1);
        }

    }

    // 将食物构造函数通过全局window对象暴露给外部作用域
    window.Food=Food;
})(window,undefined);

// 测试代码
// var map = document.getElementById('container');
// var f = new Food();
// //初始化食物
// f.render(map);